<template>
  <el-dialog :title="form.id?'修改分组':'关联分组'" :visible.sync="dialogVisible" @close="dialogClose">
    <el-form :model="form">
      <el-form-item label="属性分组" :label-width="formLabelWidth">
        <el-select v-model="form.attrGroupId" placeholder="请选择该属性所属属性分组">

          <el-option v-for="(attrGroup,index) in attrGroupList"
                     :key="attrGroup.attrGroupId"
                     :label="attrGroup.attrGroupName"
                     :value="attrGroup.attrGroupId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="在分组中的顺序" :label-width="formLabelWidth">
        <el-input-number v-model.number="form.attrSort" :min="0" placeholder="请设置该属性在属性分组中的顺序"></el-input-number>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitAttrGroup">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import attrGroupApi from '../../../../api/product/attrGroupApi'
import attrGroupRelationApi from '../../../../api/product/attrGroupRelationApi'
import baseAttrApi from '../../../../api/product/baseAttrApi'
import http from '../../../../utils/httpRequest'

export default {
  name: 'associateGroupComponent',
  // props: ['attrIdGlobal', 'catelogIdGlobal', 'attrGroupIdGlobal'],
  data () {
    return {
      formLabelWidth: '120px',
      dialogVisible: false,

      catelogId: null,
      form: {
        id: null,
        attrId: null,
        attrSort: null,
        attrGroupId: null
      },
      attrGroupList: []
    }
  },
  methods: {
    async getAttrGroupList (attrId) {

      let p2 = await baseAttrApi.getAttrByAttrId(attrId)

      //console.log("获取到的attr是",p2.data.attr.catelogId)

      let p = await attrGroupApi.getAttrGroupPaginationByCondition(p2.data.attr.catelogId)

      //console.log(p.data.page.list)

      this.attrGroupList = p.data.page.list
    },

    async getAttrGroupRelation (attrId) {
      let p = await attrGroupRelationApi.getInfo(attrId)

      if (p.data.page.list.length > 0) {
        this.form = p.data.page.list[0]
      }

      console.log(this.form)

    },

    submitAttrGroup () {
      console.log(this.form)

      http({
        url: `/pms/attrattrgrouprelation/${this.form.id ? 'update' : 'save'}`,
        method: 'post',
        data: this.form
      }).then(({data}) => {
        console.log(data)
        this.$message({
          message: this.form.id ? '修改成功' : '关联成功',
          type: 'success'
        })

        this.dialogVisible = false

        this.$emit('update-attr-list')
      })

      /*attrGroupRelationApi.save(this.form).then(({data}) => {
        this.dialogVisible = false
        this.$message({
          message: '关联成功',
          type: 'success'
        })
      })*/

    },
    dialogClose () {
      this.catelogId = null
      this.form = {
        attrId: null,
        sort: null,
        attrGroupId: null
      }
      this.attrIdGlobal = null
    },
    /**
     * 把原来的监听器当作普通方法，然后父组件通过ref来调用这个方法
     * */
    attrIdGlobalHandler (val) {
      //this.form.attrId = val
      console.log('子组件接收到的attrId是', val)

      if (val) {
        this.form.attrId = val

        this.getAttrGroupList(val)

        this.getAttrGroupRelation(val)
      }

    }
  },
  watch: {
    /**
     * 因为监听器要值有变化之后才会触发监听器，
     * 先新增关联，然后再查看刚新增的关联就不能触发监听器
     * */
/*    attrIdGlobal (val) {
      //this.form.attrId = val
      console.log('子组件接收到的attrId是', val)

      if (val) {
        this.form.attrId = val

        this.getAttrGroupList(val)

        this.getAttrGroupRelation(val)
      }

    }*/
  }
}
</script>

<style scoped>

</style>
